<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 事件名 : kebab-case 方式 -->

    <!-- 自定义组件的 v-model -->
    <div id="base-checkbox-demo">
        <!-- 这里的 lovingVue 的值将会传入这个名为 checked 的 prop -->
        <base-checkbox v-model="lovingVue"></base-checkbox>
    </div>

</body>
<script>
    Vue.component('base-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
            <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
            >
        `
    })
    new Vue({ el: '#base-checkbox-demo' });

</script>

</html>